import React from 'react';
import { Card, CardContent, Typography, Box, Chip } from '@mui/material';
import { styled } from '@mui/material/styles';
import { CheckCircle, Star, TrendingUp, Instagram, Facebook, Twitter } from '@mui/icons-material';

// Styled components with fresh green theme
const StyledCard = styled(Card)(({ theme }) => ({
  background: '#40d47e',
  borderRadius: '16px',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  position: 'relative',
  overflow: 'hidden',
  transition: 'all 0.3s ease',
  cursor: 'pointer',
  '&:hover': {
    transform: 'translateY(-8px)',
    boxShadow: '0 20px 40px rgba(64, 212, 126, 0.3)',
  },
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%)',
    pointerEvents: 'none',
  }
}));

const CardContentStyled = styled(CardContent)(({ theme }) => ({
  padding: theme.spacing(3),
  color: 'white',
  flexGrow: 1,
  display: 'flex',
  flexDirection: 'column',
  position: 'relative',
  zIndex: 1,
}));

const PlanTitle = styled(Typography)(({ theme }) => ({
  fontFamily: '"Poppins", "Roboto", sans-serif',
  fontSize: '2.5rem',
  fontWeight: '800',
  color: 'white',
  textAlign: 'center',
  marginBottom: theme.spacing(1),
  textTransform: 'uppercase',
  letterSpacing: '2px',
  lineHeight: 0.9,
}));

const PriceContainer = styled(Box)(({ theme }) => ({
  textAlign: 'center',
  marginBottom: theme.spacing(2),
}));

const Price = styled(Typography)(({ theme }) => ({
  fontFamily: '"Poppins", "Roboto", sans-serif',
  fontSize: '3.5rem',
  fontWeight: '900',
  color: 'white',
  lineHeight: 0.8,
}));

const PriceSubtext = styled(Typography)(({ theme }) => ({
  fontFamily: '"Poppins", "Roboto", sans-serif',
  fontSize: '0.95rem',
  color: 'rgba(255, 255, 255, 0.9)',
  marginTop: theme.spacing(0.5),
}));

const PopularBadge = styled(Chip)(({ theme }) => ({
  position: 'absolute',
  top: theme.spacing(2),
  right: theme.spacing(2),
  backgroundColor: 'rgba(255, 255, 255, 0.2)',
  color: 'white',
  fontWeight: '600',
  fontSize: '0.75rem',
  '& .MuiChip-icon': {
    color: 'white',
  }
}));

const FeaturesList = styled(Box)(({ theme }) => ({
  flexGrow: 1,
  marginBottom: theme.spacing(2),
}));

const FeatureItem = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  marginBottom: theme.spacing(2),
  '&:last-child': {
    marginBottom: 0,
  }
}));

const FeatureIcon = styled(CheckCircle)(({ theme }) => ({
  fontSize: '1.8rem',
  marginRight: theme.spacing(1.5),
  color: 'white',
}));

const FeatureText = styled(Typography)(({ theme }) => ({
  fontFamily: '"Poppins", "Roboto", sans-serif',
  fontSize: '1.2rem',
  color: 'white',
  fontWeight: '600',
  lineHeight: 1.1,
}));

const SocialIconsContainer = styled(Box)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  gap: theme.spacing(3),
  marginTop: 'auto',
  paddingTop: theme.spacing(2),
  borderTop: '1px solid rgba(255, 255, 255, 0.2)',
}));

const SocialIcon = styled(Box)(({ theme }) => ({
  fontSize: '2.5rem',
  color: 'white',
  opacity: 0.9,
  transition: 'all 0.3s ease',
  '&:hover': {
    opacity: 1,
    transform: 'scale(1.1)',
  }
}));

const PlanCard = ({ plan, isPopular = false }) => {
  // Format price display
  const currency = plan.currency === 'usd' ? '$' : plan.currency === 'eur' ? '€' : '£';
  const formattedPrice = `${currency}${plan.price}`;
  
  // Custom features for each plan type with minimal wording
  const customFeatures = {
    'Basic': [
      'Monthly Posts',
      'Lead Tracking',
      'Email Support'
    ],
    'Premium': [
      'Weekly Posts', 
      'Team Management',
      'Priority Support'
    ],
    'Pro': [
      'Daily Posts',
      'Virtual Tours',
      '24/7 Support',
      'Unlimited Edits'
    ],
    'Starter': [
      'Bi-weekly Posts',
      'Basic Analytics', 
      'Email Support'
    ],
    'Growth': [
      'Weekly Posts',
      'Advanced Analytics',
      'Phone Support'
    ],
    'Enterprise': [
      'Daily Posts',
      'Custom Features',
      'Dedicated Manager'
    ]
  };
  
  const features = customFeatures[plan.title] || [
    'Basic Features',
    'Standard Support',
    'Monthly Updates'
  ];

  return (
    <StyledCard>
      {isPopular && (
        <PopularBadge 
          icon={<Star />} 
          label="Popular"
          size="small"
        />
      )}
      
      <CardContentStyled>
        <PlanTitle>{plan.title}</PlanTitle>
        
        <PriceContainer>
          <Price>{formattedPrice}</Price>
          <PriceSubtext>per month</PriceSubtext>
        </PriceContainer>
        
        <FeaturesList>
          {features.map((feature, index) => (
            <FeatureItem key={index}>
              <FeatureIcon />
              <FeatureText>{feature}</FeatureText>
            </FeatureItem>
          ))}
        </FeaturesList>
        
        {/* Social Media Icons */}
        <SocialIconsContainer>
          <SocialIcon>
            <Instagram sx={{ fontSize: 'inherit' }} />
          </SocialIcon>
          <SocialIcon>
            <Facebook sx={{ fontSize: 'inherit' }} />
          </SocialIcon>
          <SocialIcon>
            <Twitter sx={{ fontSize: 'inherit' }} />
          </SocialIcon>
        </SocialIconsContainer>
      </CardContentStyled>
    </StyledCard>
  );
};

export default PlanCard;